<template>
  <el-breadcrumb :separator-icon="ArrowRight">
 <el-breadcrumb-item :to="{ path: '/index/home' }">首页</el-breadcrumb-item>
 <el-breadcrumb-item :to="{ path: '/index/manager' }">用户信息</el-breadcrumb-item>
 <el-breadcrumb-item>编辑信息</el-breadcrumb-item> 
</el-breadcrumb>
<el-form
 :label-position="labelPosition"
 label-width="100px"
 :rules="rules"
 :model="formLabelAlign"
 style="max-width: 460px"
>
 <el-form-item label="姓名"
   prop="name" :rules="[
     {required:true,message:'请输入你的名字',trigger:'blur'},
     {min:2,max:5,message:'名字长度在2位到5位',trigger:'blur'},
     {type:'string',message:'请输入正确格式的名字',tigger:'blur'}
   ]">
   <el-input v-model="formLabelAlign.name" />
 </el-form-item>
 <el-form-item label="电话"
   prop="phone" :rules="[
     {required:true,message:'请输入你的手机号',trigger:'blur'},
     {min:11,message:'手机号长度有误',tigger:'change'}

   ]">
   <el-input v-model="formLabelAlign.phone" />
 </el-form-item>
 <el-form-item label="邮箱" 
   prop="email" :rules="[
     {type:'email',message:'请输入正确的邮箱地址',trigger:'blur'}
   ]">
   <el-input v-model="formLabelAlign.email" />
 </el-form-item>
     <el-row>
         <el-button type="success" @click="open">修改</el-button>
         <el-button @click="go">取消</el-button>
     </el-row>
</el-form>
</template>

<script setup>
import axios from 'axios'
import { onMounted, reactive, ref } from 'vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import {useRoute , useRouter} from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'
import {user_edit} from '../../utils/api'
const router = useRouter()
const route = useRoute()
let rowdata = route.query
const labelPosition = ref('right')
const formLabelAlign = ref({
phone: '',
email: '',
name:'',
id:'',


})
formLabelAlign.value.name = rowdata.name
formLabelAlign.value.phone = rowdata.phone
formLabelAlign.value.email = rowdata.email 
formLabelAlign.value.id = rowdata.id
const tableData = ref({
list:[]
})
const go = () =>{
ElMessage({
 showClose: true,
 message: '已取消修改,返回上一页',
 type: 'warning',
})
router.push('/index/manager')
}


const open = () => {
 
ElMessageBox.confirm(
 '用户信息即将发生修改,确认修改?',
 '通知',
 {
   confirmButtonText: '确认',
   cancelButtonText: '取消',
   type: 'warning',
 }
)
 .then(() => {
     if(formLabelAlign.value.phone != rowdata.phone || formLabelAlign.value.email != rowdata.email || formLabelAlign.value.name != rowdata.name){
      user_edit(formLabelAlign.value).then((res)=>{
       console.log(res);
     // console.log(rowdata);
 })
   ElMessage({
     type: 'success',
     message: '修改成功',
   })
   router.push('/index/manager')
     }
 })
 .catch(() => {
   ElMessage({
     type: 'info',
     message: '修改取消',
   })
 })
}

</script>

<style lang="scss" scoped>  
.el-form{
margin-top: 30px;
}
.el-button{
margin-left: 100px;
}
.el-message-box__status {
position: absolute !important;
}
</style>